<template>
  <div class="prompt-templates">
    <div class="header">
      <el-button type="primary" @click="showAddDialog = true" :icon="Plus">
        添加模板
      </el-button>
    </div>

    <el-table :data="templates" border>
      <el-table-column prop="name" label="模板名称" width="200" />
      <el-table-column prop="category" label="分类" width="120" />
      <el-table-column prop="description" label="描述" />
      <el-table-column prop="prompt" label="提示词" show-overflow-tooltip />
      <el-table-column label="操作" width="150">
        <template #default="{ row }">
          <el-button text @click="useTemplate(row)" :icon="Document">使用</el-button>
          <el-button text @click="editTemplate(row)" :icon="Edit">编辑</el-button>
          <el-button text @click="deleteTemplate(row)" :icon="Delete" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="showAddDialog" :title="editingTemplate ? '编辑模板' : '添加模板'" width="700px">
      <el-form :model="templateForm" label-width="100px">
        <el-form-item label="模板名称">
          <el-input v-model="templateForm.name" />
        </el-form-item>
        <el-form-item label="分类">
          <el-select v-model="templateForm.category" style="width: 100%">
            <el-option label="数据分析" value="analysis" />
            <el-option label="业务操作" value="business" />
            <el-option label="报表生成" value="report" />
            <el-option label="系统配置" value="system" />
          </el-select>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="templateForm.description" />
        </el-form-item>
        <el-form-item label="提示词">
          <el-input v-model="templateForm.prompt" type="textarea" :rows="6" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showAddDialog = false">取消</el-button>
        <el-button type="primary" @click="saveTemplate">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus, Edit, Delete, Document } from '@element-plus/icons-vue'

const emit = defineEmits(['use'])

const showAddDialog = ref(false)
const editingTemplate = ref(null)

const templates = ref([
  {
    id: 1,
    name: '销售数据分析',
    category: 'analysis',
    description: '分析销售数据的通用模板',
    prompt: '请分析最近一个月的销售数据，包括：\n1. 销售趋势\n2. 热门商品\n3. 区域分布\n4. 客户分析'
  },
  {
    id: 2,
    name: '库存优化建议',
    category: 'business',
    description: '生成库存优化建议',
    prompt: '请分析当前库存状况，提供以下建议：\n1. 库存积压商品\n2. 缺货商品\n3. 补货建议'
  },
  {
    id: 3,
    name: '财务报表生成',
    category: 'report',
    description: '生成财务报表',
    prompt: '请生成本月的财务报表，包括：\n1. 收入明细\n2. 支出明细\n3. 利润分析\n4. 现金流情况'
  }
])

const templateForm = reactive({
  name: '',
  category: 'analysis',
  description: '',
  prompt: ''
})

const editTemplate = (template) => {
  editingTemplate.value = template
  Object.assign(templateForm, template)
  showAddDialog.value = true
}

const saveTemplate = () => {
  if (editingTemplate.value) {
    Object.assign(editingTemplate.value, templateForm)
    ElMessage.success('模板已更新')
  } else {
    templates.value.push({
      id: Date.now(),
      ...templateForm
    })
    ElMessage.success('模板已添加')
  }
  showAddDialog.value = false
  resetForm()
}

const deleteTemplate = (template) => {
  templates.value = templates.value.filter(t => t.id !== template.id)
  ElMessage.success('模板已删除')
}

const useTemplate = (template) => {
  emit('use', template)
  ElMessage.success('模板已应用')
}

const resetForm = () => {
  editingTemplate.value = null
  Object.assign(templateForm, {
    name: '',
    category: 'analysis',
    description: '',
    prompt: ''
  })
}
</script>

<style scoped lang="scss">
.prompt-templates {
  padding: 20px;
}

.header {
  margin-bottom: 20px;
}
</style>
